<template>
    <div class="body">
        <div class="top">
            <el-row :gutter="20">
                <el-col :span="25">
                    <div class="block">
                        <img src="@/assets/img/computer.png" class="pic" />
                        <div class="num">{{ topAll.sumCount }}</div>
                        <div class="title">设备总数</div>
                    </div>
                </el-col>
                <el-col :span="25">
                    <div class="block" style="background-color: #16b8a7">
                        <img src="@/assets/img/device.png" class="pic" />
                        <div class="num">{{ topAll.onlineCount }}</div>
                        <div class="title">在线设备总数</div>
                    </div>
                </el-col>
                <el-col :span="25">
                    <div class="block" style="background-color: #f5b01c">
                        <img src="@/assets/img/warn.png" class="pic" />
                        <div class="num">{{ topAll.offlineCount }}</div>
                        <div class="title">离线设备数</div>
                    </div>
                </el-col>
                <el-col :span="25">
                    <div class="block" style="background-color: #56a3ee">
                        <img src="@/assets/img/warning.png" class="pic" />
                        <div class="num">{{ topAll.alarm_count }}</div>
                        <div class="title">发生报警设备总数</div>
                    </div>
                </el-col>
                <el-col :span="25">
                    <div class="block" style="background-color: #b8167c">
                        <img src="@/assets/img/warning.png" class="pic" />
                        <div class="num">{{ topAll.month_alarm_count }}</div>
                        <div class="title">本月设备告警数</div>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div style="width: 100%; height: 20px"></div>
        <el-row :gutter="20">
            <el-col :span="12">
                <div class="chart">
                    <div class="title">用电量</div>
                    <div class="time-btn">
                        <el-radio-group
                            v-model="radio"
                            size="mini"
                            @change="getElineChart"
                        >
                            <el-radio-button label="3">日</el-radio-button>
                            <el-radio-button label="2">月</el-radio-button>
                            <el-radio-button label="1">年</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="chart-container" id="chart-container"></div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="chart">
                    <div class="title">用水量</div>
                    <div class="time-btn">
                        <el-radio-group
                            v-model="radio2"
                            size="mini"
                            @change="getWlineChart"
                        >
                            <el-radio-button label="3">日</el-radio-button>
                            <el-radio-button label="2">月</el-radio-button>
                            <el-radio-button label="1">年</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="chart-container" id="chart-container2"></div>
                </div>
            </el-col>
        </el-row>
        <div style="width: 100%; height: 20px"></div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="chart">
                    <div class="title">用电量TOP5</div>
                    <div class="time-btn">
                        <el-radio-group
                            v-model="radio3"
                            size="mini"
                            @change="getETop"
                        >
                            <el-radio-button label="day">日</el-radio-button>
                            <el-radio-button label="month">月</el-radio-button>
                            <el-radio-button label="year">年</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div
                        v-for="(item, index) in list"
                        :key="index"
                        style="
                            position: relative;
                            top: 80px;
                            left: -30px;
                            padding-right: 10px;
                        "
                    >
                        <el-row style="margin-bottom: 40px">
                            <el-col :span="3" style="margin-right: 5px">
                                <div class="ranking" v-if="item.ranking === 1">
                                    {{ item.ranking }}
                                </div>
                                <div
                                    class="ranking"
                                    v-else-if="item.ranking === 2"
                                    style="background-color: #f5b01c"
                                >
                                    {{ item.ranking }}
                                </div>
                                <div
                                    class="ranking"
                                    v-else-if="item.ranking === 3"
                                    style="background-color: #5087ec"
                                >
                                    {{ item.ranking }}
                                </div>
                                <div
                                    class="ranking"
                                    v-else-if="item.ranking === 4"
                                    style="background-color: #58a55c"
                                >
                                    {{ item.ranking }}
                                </div>
                                <div
                                    class="ranking"
                                    v-else-if="item.ranking === 5"
                                    style="background-color: #16b8a7"
                                >
                                    {{ item.ranking }}
                                </div>
                            </el-col>
                            <el-col :span="13"
                                ><div
                                    class="title-list"
                                    style="text-align: left"
                                >
                                    {{ item.device_name }}
                                </div></el-col
                            >
                            <el-col :span="5"
                                ><div
                                    class="title-list"
                                    style="text-align: right"
                                >
                                    {{ item.add_nums }}kWh
                                </div></el-col
                            >
                        </el-row>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="chart">
                    <div class="title">近3个月用电量(kWh)</div>
                    <div class="chart-container" id="chart-container3"></div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="chart">
                    <div class="title">用水量TOP5</div>
                    <div class="time-btn">
                        <el-radio-group
                            v-model="radio4"
                            size="mini"
                            @change="getWTop"
                        >
                            <el-radio-button label="day">日</el-radio-button>
                            <el-radio-button label="month">月</el-radio-button>
                            <el-radio-button label="year">年</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div
                        v-for="(item, index) in list2"
                        :key="index"
                        style="position: relative; top: 80px; left: -20px"
                    >
                        <el-row style="margin-bottom: 40px">
                            <el-col :span="2" style="margin-right: 10px">
                                <div class="ranking" v-if="item.ranking === 1">
                                    {{ item.ranking }}
                                </div>
                                <div
                                    class="ranking"
                                    v-else-if="item.ranking === 2"
                                    style="background-color: #f5b01c"
                                >
                                    {{ item.ranking }}
                                </div>
                                <div
                                    class="ranking"
                                    v-else-if="item.ranking === 3"
                                    style="background-color: #5087ec"
                                >
                                    {{ item.ranking }}
                                </div>
                                <div
                                    class="ranking"
                                    v-else-if="item.ranking === 4"
                                    style="background-color: #58a55c"
                                >
                                    {{ item.ranking }}
                                </div>
                                <div
                                    class="ranking"
                                    v-else-if="item.ranking === 5"
                                    style="background-color: #16b8a7"
                                >
                                    {{ item.ranking }}
                                </div>
                            </el-col>
                            <el-col :span="14"
                                ><div
                                    class="title-list"
                                    style="text-align: left"
                                >
                                    {{ item.device_name }}
                                </div></el-col
                            >
                            <el-col :span="5"
                                ><div
                                    class="title-list"
                                    style="text-align: right"
                                >
                                    {{ item.add_nums }}m³
                                </div></el-col
                            >
                        </el-row>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="chart">
                    <div class="title">近3个月用水量(m³)</div>
                    <div class="chart-container" id="chart-container4"></div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {
    energyTop,
    energyList,
    energyChart,
    getEnergytrend,
} from "@/api/sendhttp/son";
import { data } from "jquery";
export default {
    data() {
        return {
            radio: "3",
            radio2: "3",
            radio3: "day",
            radio4: "day",
            list: [],
            list2: [],
            top: {
                table_name: "ob_iot_serialport_device",
                device_type: "meter",
            },
            topAll: "",
            props: {},
            props2: {},
            unit: "时",
            unit2: "时",
        };
    },
    mounted() {
        energyTop(this.top).then((res) => {
            this.topAll = res.data;
        });

        this.getETop();
        this.getWTop();
        this.getElineChart();
        this.getWlineChart();

        energyList({ time: this.radio4, type: "2" }).then((res) => {
            this.list2 = res.data;
            for (let i = 0; i < this.list2.length; i++) {
                this.list2[i].ranking = i + 1;
            }
        });

        this.chart3();
        this.chart4();
    },
    methods: {
        getETop() {
            energyList({ time: this.radio3, type: "1" }).then((res) => {
                this.list = res.data;
                for (let i = 0; i < this.list.length; i++) {
                    this.list[i].ranking = i + 1;
                }
            });
        },
        getWTop() {
            energyList({ time: this.radio4, type: "2" }).then((res) => {
                this.list2 = res.data;
                for (let i = 0; i < this.list2.length; i++) {
                    this.list2[i].ranking = i + 1;
                }
            });
        },
        getElineChart() {
            getEnergytrend({ type: 1, datetype: this.radio }).then((res) => {
                if (this.radio == 1) {
                    this.props.lData = ["今年", "去年", "前年"];
                    this.props.data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
                    this.unit = "月";
                    this.props.line = res.data.data.electricityYear;
                } else if (this.radio == 2) {
                    this.props.lData = ["本月", "上月", "前月"];
                    this.props.data = [
                        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
                        17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
                        31,
                    ];
                    this.unit = "日";
                    this.props.line = res.data.data.electricityMonth;
                } else if (this.radio == 3) {
                    this.props.data = [
                        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
                        17, 18, 19, 20, 21, 22, 23, 24,
                    ];
                    this.unit = "时";
                    this.props.lData = ["今天", "昨天", "前天"];
                    this.props.line = res.data.data.electricityDay;
                }
                // this.props.line = res.data.data
                // console.log(this.props.line)
                this.chart1();
            });
        },
        getWlineChart() {
            getEnergytrend({ type: 2, datetype: this.radio2 }).then((res) => {
                if (this.radio2 == 1) {
                    this.props2.lData = ["今年", "去年", "前年"];
                    this.props2.data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
                    this.unit2 = "月";
                    this.props2.line = res.data.data.electricityYear;
                } else if (this.radio2 == 2) {
                    this.props2.lData = ["本月", "上月", "前月"];
                    this.props2.data = [
                        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
                        17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
                        31,
                    ];
                    this.unit2 = "日";
                    this.props2.line = res.data.data.electricityMonth;
                } else if (this.radio2 == 3) {
                    this.props2.lData = ["今天", "昨天", "前天"];
                    this.props2.data = [
                        1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
                        17, 18, 19, 20, 21, 22, 23, 24,
                    ];
                    this.unit2 = "时";
                    this.props2.line = res.data.data.electricityDay;
                }
                // this.props2.line = res.data.data
                this.chart2();
            });
        },
        selectDate(e) {
            var dateType = "";
            if (e == "日") {
                dateType = "D";
            } else if (e == "月") {
                dateType = "M";
            } else if (e == "年") {
                dateType = "Y";
            }
            energyList({
                table_name: "iot_ammeter_yida_day",
                dateType: dateType,
            }).then((res) => {
                this.list = res.data;
                for (let i = 0; i < this.list.length; i++) {
                    this.list[i].ranking = i + 1;
                }
            });
        },

        selectDate2(e) {
            var dateType = "";
            if (e == "日") {
                dateType = "D";
            } else if (e == "月") {
                dateType = "M";
            } else if (e == "年") {
                dateType = "Y";
            }
            energyList({
                table_name: "ob_iot_device_meter_day",
                dateType: dateType,
            }).then((res) => {
                this.list2 = res.data;
                for (let i = 0; i < this.list2.length; i++) {
                    this.list2[i].ranking = i + 1;
                }
            });
        },

        chart1() {
            var dom = document.getElementById("chart-container");
            var myChart = this.$echarts.init(dom, null, {
                renderer: "canvas",
                useDirtyRect: false,
            });
            var app = {};

            var option;

            option = {
                grid: {
                    left: 100,
                    top: 20,
                    bottom: 30,
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: this.props.lData,
                    textStyle: {
                        // color: "#FFFFFF"
                    },
                    top: "0",
                },
                xAxis: {
                    type: "category",
                    name: this.unit,
                    boundaryGap: false,
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        // color: '#fff',
                        fontSize: 16,
                    },
                    data: this.props.data,
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        // color: '#fff',
                        fontSize: 16,
                    },
                },
                series: [
                    {
                        name: this.props.lData[0],
                        data: this.props.line[0],
                        type: "line",
                        smooth: true,
                        // areaStyle: {
                        //   opacity: 0.8,
                        //   color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //     {
                        //       offset: 0,
                        //       color: 'rgba(21, 83, 143, .8)'
                        //     },
                        //     {
                        //       offset: 1,
                        //       color: 'rgba(9, 34, 68, .6)'
                        //     }
                        //   ])
                        // },
                    },
                    {
                        name: this.props.lData[1],
                        data: this.props.line[1],
                        type: "line",
                        smooth: true,
                        // areaStyle: {
                        //   opacity: 0.8,
                        //   color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //     {
                        //       offset: 0,
                        //       color: 'rgba(21, 83, 143, .8)'
                        //     },
                        //     {
                        //       offset: 1,
                        //       color: 'rgba(9, 34, 68, .6)'
                        //     }
                        //   ])
                        // },
                    },
                    {
                        name: this.props.lData[2],
                        data: this.props.line[2],
                        type: "line",
                        smooth: true,
                        // areaStyle: {
                        //   opacity: 0.8,
                        //   color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //     {
                        //       offset: 0,
                        //       color: 'rgba(21, 83, 143, .8)'
                        //     },
                        //     {
                        //       offset: 1,
                        //       color: 'rgba(9, 34, 68, .6)'
                        //     }
                        //   ])
                        // },
                    },
                ],
            };

            if (option && typeof option === "object") {
                myChart.setOption(option);
            }

            window.addEventListener("resize", myChart.resize);
        },

        chart2() {
            var dom = document.getElementById("chart-container2");
            var myChart = this.$echarts.init(dom, null, {
                renderer: "canvas",
                useDirtyRect: false,
            });
            var app = {};

            var option;

            option = {
                grid: {
                    left: 100,
                    top: 20,
                    bottom: 30,
                },
                tooltip: {
                    trigger: "axis",
                },
                legend: {
                    data: this.props2.lData,
                    textStyle: {
                        // color: "#FFFFFF"
                    },
                    top: "0",
                },
                xAxis: {
                    type: "category",
                    name: this.unit2,
                    boundaryGap: false,
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        // color: '#fff',
                        fontSize: 16,
                    },
                    data: this.props2.data,
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        show: false,
                    },
                    axisLabel: {
                        // color: '#fff',
                        fontSize: 16,
                    },
                },
                series: [
                    {
                        name: this.props2.lData[0],
                        data: this.props2.line[0],
                        type: "line",
                        smooth: true,
                        // areaStyle: {
                        //   opacity: 0.8,
                        //   color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //     {
                        //       offset: 0,
                        //       color: 'rgba(21, 83, 143, .8)'
                        //     },
                        //     {
                        //       offset: 1,
                        //       color: 'rgba(9, 34, 68, .6)'
                        //     }
                        //   ])
                        // },
                    },
                    {
                        name: this.props2.lData[1],
                        data: this.props2.line[1],
                        type: "line",
                        smooth: true,
                        // areaStyle: {
                        //   opacity: 0.8,
                        //   color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //     {
                        //       offset: 0,
                        //       color: 'rgba(21, 83, 143, .8)'
                        //     },
                        //     {
                        //       offset: 1,
                        //       color: 'rgba(9, 34, 68, .6)'
                        //     }
                        //   ])
                        // },
                    },
                    {
                        name: this.props2.lData[2],
                        data: this.props2.line[2],
                        type: "line",
                        smooth: true,
                        // areaStyle: {
                        //   opacity: 0.8,
                        //   color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        //     {
                        //       offset: 0,
                        //       color: 'rgba(21, 83, 143, .8)'
                        //     },
                        //     {
                        //       offset: 1,
                        //       color: 'rgba(9, 34, 68, .6)'
                        //     }
                        //   ])
                        // },
                    },
                ],
            };

            if (option && typeof option === "object") {
                myChart.setOption(option);
            }

            window.addEventListener("resize", myChart.resize);
        },

        chart3() {
            var date = [];
            var num = [];
            energyChart(1).then((res) => {
                date = res.data.data.map((item) => {
                    return item.device_name;
                });
                num = res.data.data.map((item) => {
                    return item.add_nums;
                });
            });

            setTimeout(() => {
                var dom = document.getElementById("chart-container3");
                var myChart = this.$echarts.init(dom, null, {
                    renderer: "canvas",
                    useDirtyRect: false,
                });
                var app = {};

                var option;

                option = {
                    grid: {
                        left: 50,
                    },
                    tooltip: {
                        trigger: "axis",
                    },
                    legend: {
                        data: ["电量"],
                    },
                    xAxis: {
                        type: "category",
                        data: date,
                        axisLabel: {
                            //X轴字体倾斜设置
                            interval: 0,
                            rotate: 30, //倾斜的程度
                        },
                    },
                    yAxis: {
                        type: "value",
                    },
                    dataZoom: [
                        {
                            start: 0, // 默认为0
                            end: 100, // 默认为100
                            type: "slider",
                            maxValueSpan: 10, // 显示数据的条数(默认显示10个，注意：从 0 开始计算)
                            show: date.length > 3, //是否显示滚动条(this.XData换成自己的数据)
                            xAxisIndex: [0],
                            handleSize: 0, // 滑动条的 左右2个滑动条的大小
                            height: 0,
                            bottom: 10,
                            borderColor: "transparent",
                            showDataShadow: false, // 是否显示数据阴影 默认auto
                            showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
                            filterMode: "filter",
                            // 	brushSelect: false, //刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
                            moveHandleStyle: {
                                color: "rgba(0,0,0,0.2)",
                                shadowColor: "rgba(0,0,0,0)",
                                borderCap: "round",
                            },
                        },
                    ],
                    series: [
                        {
                            name: "电量",
                            data: num,
                            type: "bar",
                            label: {
                                show: false,
                                position: "top",
                            },
                        },
                    ],
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option);
                }

                window.addEventListener("resize", myChart.resize);
            }, 800);
        },

        chart4() {
            var date = [];
            var num = [];
            energyChart(2).then((res) => {
                date = res.data.data.map((item) => {
                    return item.device_name;
                });
                num = res.data.data.map((item) => {
                    return item.add_nums;
                });
            });

            setTimeout(() => {
                var dom = document.getElementById("chart-container4");
                var myChart = this.$echarts.init(dom, null, {
                    renderer: "canvas",
                    useDirtyRect: false,
                });
                var app = {};

                var option;

                option = {
                    grid: {
                        left: 40,
                    },
                    tooltip: {
                        trigger: "axis",
                    },
                    legend: {
                        data: ["水量"],
                    },
                    xAxis: {
                        type: "category",
                        data: date,
                        axisLabel: {
                            //X轴字体倾斜设置
                            interval: 0,
                            rotate: 30, //倾斜的程度
                        },
                    },
                    yAxis: {
                        type: "value",
                    },
                    dataZoom: [
                        {
                            start: 0, // 默认为0
                            end: 100, // 默认为100
                            type: "slider",
                            maxValueSpan: 10, // 显示数据的条数(默认显示10个，注意：从 0 开始计算)
                            show: date.length > 3, //是否显示滚动条(this.XData换成自己的数据)
                            xAxisIndex: [0],
                            handleSize: 0, // 滑动条的 左右2个滑动条的大小
                            height: 0,
                            bottom: 10,
                            borderColor: "transparent",
                            showDataShadow: false, // 是否显示数据阴影 默认auto
                            showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
                            filterMode: "filter",
                            // 	brushSelect: false, //刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
                            moveHandleStyle: {
                                color: "rgba(0,0,0,0.2)",
                                shadowColor: "rgba(0,0,0,0)",
                                borderCap: "round",
                            },
                        },
                    ],
                    series: [
                        {
                            name: "水量",
                            data: num,
                            type: "bar",
                            label: {
                                show: false,
                                position: "top",
                            },
                        },
                    ],
                };

                if (option && typeof option === "object") {
                    myChart.setOption(option);
                }

                window.addEventListener("resize", myChart.resize);
            }, 800);
        },
    },
};
</script>

<style scoped lang="scss">
.body {
    padding: 20px;
}
.top {
    width: 100%;
    margin: auto;
}
.chart-container {
    position: absolute;
    bottom: 15px;
    width: 100%;
    height: 364px;
    overflow: hidden;
    margin: auto;
}
.block {
    width: 100%;
    height: 80px;
    line-height: 20px;
    border-radius: 8px;
    background-color: #56a3ee;
    text-align: center;
    position: relative;
}
.pic {
    position: absolute;
    top: 20px;
    left: 3%;
}
.num {
    position: absolute;
    right: 3%;
    top: 20px;
    color: rgba(255, 254, 232, 1);
    font-size: 28px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
}
.title {
    position: absolute;
    right: 3%;
    top: 45px;
    color: rgba(255, 254, 232, 1);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
}
::v-deep .el-col-25 {
    width: 20%;
}
.time-btn {
    position: absolute;
    right: 20px;
    top: 20px;
}
.chart {
    position: relative;
    margin: auto;
    width: 100%;
    height: 456px;
    border-radius: 8px;
    background-color: rgba(241, 243, 245, 1);
    border: 1px solid rgba(213, 213, 211, 1);
    .title {
        position: absolute;
        top: 20px;
        left: 20px;
        width: 180px;
        height: 24px;
        color: rgba(16, 16, 16, 1);
        font-size: 16px;
        text-align: left;
        font-family: SourceHanSansSC-regular;
    }
    .button {
        position: absolute;
        right: 20px;
        top: 20px;
        width: 81px;
        height: 25px;
        line-height: 25px;
        border-radius: 3px;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
        text-align: center;
        font-family: Roboto;
        border: 1px solid rgba(187, 187, 187, 1);
    }
}
.title-list {
    line-height: 30px;
    width: 82%;
    height: 30px;
    padding-left: 40px;
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    text-align: left;
    font-family: SourceHanSansSC-regular;
}
.ranking {
    margin-left: 40px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    background-color: rgba(240, 46, 46, 1);
    color: rgba(241, 243, 245, 1);
    font-size: 16px;
    text-align: center;
    font-family: Roboto;
}
</style>
